<template>
  <div class="page-container">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">用户列表</h1>
      </div>
    </div>

    <el-card shadow="never">
      <div class="toolbar">
        <el-input v-model="keyword" placeholder="搜索用户名/邮箱/手机号" clearable style="max-width: 260px" />
        <el-button type="primary" @click="store.loadUserList" :loading="store.loading">刷新</el-button>
      </div>

      <el-table :data="filtered" :loading="store.loading" border>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column label="头像" width="80">
          <template #default="{ row }">
            <el-avatar :size="32" :src="row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="手机" width="140" />
      </el-table>

      <div class="pager">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="store.total"
          :page-size="store.queryParams.limit"
          v-model:current-page="store.queryParams.page"
          @current-change="store.loadUserList"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useUserListStore } from '@/stores/user/userListStore'

const store = useUserListStore()
const keyword = ref('')

const filtered = computed(() => {
  const k = keyword.value.trim().toLowerCase()
  if (!k) return store.userList
  return store.userList.filter((u) =>
    [u.username, u.email, u.phone].some(v => String(v || '').toLowerCase().includes(k))
  )
})

onMounted(() => store.loadUserList())
</script>

<style scoped lang="scss">
.page-container { padding: 16px; }
.page-header { margin-bottom: 12px; }
.toolbar { display: flex; gap: 12px; margin-bottom: 12px; }
.pager { margin-top: 12px; display: flex; justify-content: flex-end; }
</style>


